<template>
  <div class="home">
    <!-- <div class="nav">
      <img src="../assets/logo1.jpg" alt="logo">
      <input type="text" class="txt"/>
      <span class="sou">
        <button class="btn">搜索</button>
      </span>
    </div> -->
    <form action="/">
      <van-search
        v-model="dates"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <div>
      <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white">
        <van-swipe-item v-for="item in banners" :key="item.id">
          <img :src="item.coverImage | dalImg" alt="item.name" />
        </van-swipe-item>
      </van-swipe>
      <van-grid :column-num="3">
        <van-grid-item
          v-for="item in categories"
          :key="item.id"
          :icon="item.coverImage | dalImg"
          :text="item.name"
          :to="{
            name: 'ProductList',
            query: {
              tid: item.id,
              tname: item.name,
            },
          }"
        />
      </van-grid>
      <van-divider>热卖商品</van-divider>
      <van-card
        v-for="(item, index) in sousuo(dates)"
        :tag="index < 8 ? '热卖' : ''"
        :key="item.id"
        :num="item.amount"
        :price="item.price.toFixed(2)"
        :origin-price="(item.price * 1.3).toFixed(2)"
        :title="item.name"
        :thumb="item.coverImage | dalImg"
        @click="toDetail(item.id)"
      >
        <!-- <template #footer>
        <van-button size="mini">按钮</van-button>
        <van-button size="mini">按钮</van-button>
      </template> -->
      </van-card>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { loadBannersAPI } from "../services/banners";

import { loadProductCategories } from "../services/product-categories";

import { loadProductsAPI } from "../services/product";

export default {
  name: "Home",
  data() {
    return {
      banners: [],
      categories: [],
      products: [],
      dates: "",
    };
  },
  async created() {
    const resBanners = await loadBannersAPI(); //轮播
    const resCategories = await loadProductCategories(); //商品分类列表
    const resProdusts = await loadProductsAPI();
    this.banners = resBanners.data; //轮播
    this.categories = resCategories.data; //商品分类列表
    this.products = resProdusts.data;
  },
  components: {},
  methods: {
    sousuo(dates) {
      var newlist = [];
      this.products.forEach((item) => {
        if (item.name.indexOf(dates) != -1) {
          newlist.push(item);
        }
      });
      return newlist;
    },
    onSearch(val) {},
    onCancel() {
      if (this.onSearch != null) {
        Toast("取消搜索");
      } else {
        alert("你还未输入内容");
      }
    },
    toDetail(id) {
      this.$router.push({
        name: "Detail",
        query: {
          id,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.my-swipe img {
  display: block;
  width: 100vw;
}
</style>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.nav {
  width: 100%;
  height: 10vw;
  background-color: #fff;
  position: fixed;
  top: 0;
  z-index: 1;
}

.nav img {
  width: 24vw;
}

/* span {
  position: fixed;
  right: 0;
  width: 10vw;
  height: 6.5vw;
  background-color: red;
  margin-top: 2vw;
  text-align: center;
  line-height: 6vw;
} */

.txt {
  position: fixed;
  right: 10vw;
  margin-top: 2vw;
  width: 50vw;
  height: 6vw;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  border: 1px solid red;
  outline: medium;
}

.sou {
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  position: fixed;
  right: 0;
  width: 10vw;
  /* height: 6.5vw; */
  background-color: red;
  margin-top: 2vw;
  text-align: center;
  line-height: 6vw;
}

.btn {
  border: none;
  background: red;
  color: white;
  font-size: 12px;
  height: 6vw;
}
</style>
